 <template>
  <div class="container-nav">
    <!-- 头部导航栏 -->
    <div>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="全部" name="5"></el-tab-pane>
          <el-tab-pane label="待审核" name="0"></el-tab-pane>
          <el-tab-pane label="已审核" name="1"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
        </el-tabs>
      </div>

    <div class="box-card1 totalBox">
      <!-- 中间显示条数 -->
      <i class="el-icon-info"></i> 数据一共 {{ total }} 条
    </div>

      <!-- 下面表格 -->
      <el-table style="width: 100%" :data="chosenList">
        <el-table-column
          prop="number"
          label="试题编码"
          width="150"
        ></el-table-column>

        <el-table-column prop="subject" label="学科" width="120">
        </el-table-column>

        <el-table-column prop="catalog" label="目录" width="120">
        </el-table-column>

        <el-table-column prop="questionType" label="题型" width="150">
          <template #default="{ row }">{{ tranFn(row.questionType) }}</template>
        </el-table-column>

        <el-table-column prop="question" label="题干" width="250">
          <template #default="{ row }">
            <p v-html="row.question"></p>
          </template>
        </el-table-column>

        <el-table-column label="录入时间" width="250">
          <template v-slot="{ row }">
            {{ trantime(row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column label="难度" width="100">
          <template #default="{ row }">{{
            getdifficulty(row.difficulty)
          }}</template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="100">
        </el-table-column>
        <el-table-column label="审核状态" width="100">
          <template #default="{ row }">{{ getchkType(row.chkState) }}</template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="100">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="100">
        </el-table-column>
        <el-table-column label="发布状态" width="100">
          <template #default="{ row }">{{ getpublishType(row) }}</template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="230">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="previewFn(row)"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="row.chkState !== 0"
              @click="lookFn(row)"
              >审核</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="row.publishState === 1"
              @click="updateFn(row.id)"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="istopFn(row)">{{
              row.publishState === 1 ? "下架" : "上架"
            }}</el-button>
            <el-button
              type="text"
              size="small"
              :disabled="row.publishState === 1"
              @click="delFn(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="params.pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 弹出层子组件 -->
    <questions-dialog
      :dialogVisible.sync="isshow"
      :form="data"
    ></questions-dialog>

    <!-- 审核弹出层 -->
    <el-dialog
      title="题目审核"
      :visible="dialogVisible"
      @close="closeFn"
      width="30%"
    >
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            <el-radio-group v-model="form.chkState">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">拒绝</el-radio>
            </el-radio-group>
          </div></el-col
        >
      </el-row>
      <el-row style="margin-top: 15px">
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            <el-input
              type="textarea"
              placeholder="请输入审核意见"
              v-model.trim="form.chkRemarks"
            ></el-input></div
        ></el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="comfirmFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入获取精选列表接口
import {
  choice,
  choiceCheck,
  choicePublish,
  Queremove,
  Quedetail
} from '@/api/hmmm/questions'

// 引入子组件
import QuestionsDialog from './questions-dialog.vue'

// 引入试题类型  难度  方向
import { questionType, difficulty, chkType } from '@/api/hmmm/constants'

// 引入时间转换接口
import dayjs from 'dayjs'
export default {
  components: {
    QuestionsDialog
  },
  data () {
    return {
      data: {}, // 传递给子组件id
      chosenList: [], // 精选列表数据
      activeName: '5', // 导航
      questionTypeList: questionType, // 题型
      difficultyList: difficulty, // 难度
      dialogVisible: false, // 审核弹出层
      total: 0, // 总条数
      params: {
        page: 1,
        pagesize: 5,
        subjectID: '',
        keyword: '',
        chkState: ''
      },
      isshow: false, // 控制子组件显示隐藏
      form: {
        chkState: 1, // 审核状态
        chkRemarks: '', // 审核意见
        id: '' // 审核id
      }
    }
  },
  methods: {
    // 获取精选列表的方法
    async getChoice () {
      const map = {}
      for (const k in this.params) {
        if (this.params[k] !== '') {
          map[k] = this.params[k]
        }
      }

      // 掉接口获取数据
      const res = await choice(map)

      // 总条数赋值给本地
      this.total = res.data.counts

      // 将数据赋值给本地
      this.chosenList = res.data.items
    },
    // 封装方法筛选后台返回的数据是什么题型
    tranFn (id) {
      if (!id) return
      const target = this.questionTypeList.filter((item) => {
        return item.value === +id
      })
      return target[0].label
    },
    // 封装方法筛选后台返回的数据是什么难度
    getdifficulty (id) {
      if (!id) return
      const target = this.difficultyList.filter((item) => {
        return item.value === +id
      })
      return target[0].label
    },
    // 时间转换方法
    trantime (value) {
      const str = 'YYYY-MM-DD hh:mm:ss'
      return dayjs(value).format(str)
    },
    // 审核状态方法
    getchkType (id) {
      const target = chkType.filter((item) => {
        return item.value === +id
      })

      if (target.length !== 0) {
        return target[0].label
      }
    },
    // 发布状态方法
    getpublishType (row) {
      let state = ''
      if (row.chkState === 2 && row.publishState === 1) {
        state = '已发布'
      } else if (row.chkState === 2 && row.publishState === 0) {
        state = '已下架'
      } else {
        state = '待发布'
      }
      return state
    },
    // 改变每页条数触发的事件
    handleSizeChange (page) {
      this.params.pagesize = page

      // 掉方法获取精选列表
      this.getChoice()
    },
    // 改变页数会触发的事件
    handleCurrentChange (page) {
      this.params.page = page

      // 掉方法获取精选列表
      this.getChoice()
    },
    // 点击预览触发的事件
    async previewFn (row) {
      // 掉接口获取基础题
      const res = await Quedetail(row)

      // 当前点击的数据传递给子组件
      this.data = res.data

      // 显示子组件
      this.isshow = true
    },
    // 关闭审核弹出层触发的事件
    closeFn () {
      // 关闭弹出层
      this.dialogVisible = false

      // 清空表单
      this.form = {
        chkState: 1, // 审核状态
        chkRemarks: '', // 审核意见
        id: '' // 审核id
      }
    },
    // 点击审核触发的事件
    lookFn (row) {
      // 显示弹出层
      this.dialogVisible = true

      this.form.id = row.id
    },
    // 点击审核确定触发的事件
    async comfirmFn () {
      if (this.form.chkRemarks === '') {
        this.$message.warning('审核意见为必填项')
      } else {
        // 掉接口提交审核
        await choiceCheck(this.form)

        // 重新获取数据
        this.getChoice()

        // 给出提示
        this.$message.success('操作成功')

        // 关闭弹出层
        this.closeFn()
      }
    },
    // 点击修改触发的事件
    updateFn (id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id
        }
      })
    },
    // 点击上下架触发的事件
    istopFn (row) {
      const is =
        row.publishState === 1
          ? '您确定下架这道题目吗?'
          : '您确定上架这道题目吗?'

      this.$confirm(`${is}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (row.publishState === 1) {
            // 掉接口下架
            await choicePublish({ id: row.id, publishState: 0 })
            this.$message({
              type: 'success',
              message: '下架成功!'
            })
          } else {
            // 掉接口上架
            await choicePublish({ id: row.id, publishState: 1 })
            this.$message({
              type: 'success',
              message: '上架成功!'
            })
          }

          // 重新获取数据
          this.getChoice()
        })
        .catch(() => {})
    },
    // 点击删除触发的事件
    delFn (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          console.log(row)
          // 掉接口删除数据
          await Queremove(row)

          // 给出提示
          this.$message({
            type: 'success',
            message: '删除成功!'
          })

          // 重新获取数据
          this.getChoice()
        })
        .catch(() => {})
    }
  },
  mounted () {
    // 掉方法获取精选列表
    this.getChoice()
  },
  watch: {
    activeName () {
      if (this.activeName === '5') {
        this.params.chkState = ''
        this.getChoice()
      } else {
        this.params.chkState = this.activeName
        this.getChoice()
      }
    }
  },
  created () {
    this.$eventBus.$on('tranFn', async (data) => {
      this.params.keyword = data.keyword
      this.params.subjectID = data.subjectID
      this.getChoice()
    })
  }
}
</script>

 <style scoped lang="scss" >
.box-card1 {
  background-color: #f4f4f5;
  height: 35px;
  border-radius: 5px;
  line-height: 35px;
  padding-left: 10px;
  margin-bottom: 15px;
}
.block {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.totalBox {
  font-size: 13px;
  color: #909399;
  i {
    font-size: 16px;
    margin: 0 5px;
  }
}
::v-deep .el-table__header {
  border-bottom: 2px solid #f4f4f5;
}
::v-deep .el-table th.el-table__cell {
  background-color: #fafafa;
}
</style>
